import React,{useState,useEffect} from 'react'

function UseEffect(props){
    console.log('start')
    const [qty,setQty] = useState(1)
    const [page,setPage] = useState(1)
    

    // useEffect使用格式： useEffect(callback)

    // 用法一：默认用法=componentDidMount+componentDidUpdate
    useEffect(()=>{
        // 这里的代码在组件<渲染后>执行
        // 在初始化与组件刷新时执行
        console.log('useEffect默认用法')
    })

    // 用法二：指定空依赖=componentDidMount
    useEffect(()=>{
        // 这里的代码只在初始化时执行
        console.log('useEffect指定空依赖')

        
    },[])

     // 用法三：指定依赖=componentDidMount+shouldComponentUpdate
     useEffect(()=>{
        // 这里的代码在初始化以及依赖发生变化时执行
        console.log('useEffect指定依赖')
        const xhr = new XMLHttpRequest()
        xhr.onload = function(){
            console.log('data',xhr.response)
        }
        // 设置响应类型
        xhr.responseType = 'json'
        xhr.open('get','http://120.76.247.5:2002/api/class?page='+page,true)
        xhr.send()
     },[page])

      // 用法四：useEffect返回一个函数=componentWillUnmount
      useEffect(()=>{

        return function(){
            // 这里的代码在组件被销毁时执行
            console.log('用法四：useEffect返回一个函数')
        }
      },[])

    console.log('end')
    return (
        <div>
            <h4>useEffect</h4>
            <button onClick={()=>{
                setQty(qty+1)
            }}>qty: {qty}</button>
            <button onClick={()=>{
                setPage(page+1)
            }}>page: {page}</button>
        </div>
    )
}

export default UseEffect;